<template>
  <div class="mv-library">
    <div
      v-for="item of mvList"
      class="each-mv-wrap"
      @click="playMV(item.id)"
      :key="item.id"
    >
      <img v-lazy="item.cover" />
      <div class="each-mv-count">
        <span class="icon-视频"></span>
        {{ item.playCount }}
      </div>
      <div class="each-mv-msg">
        <div class="each-mv-name">
          {{ item.name }}-
          <span v-for="(artist, index) in item.artists" :key="artist.id"
            >{{ artist.name
            }}<span v-if="index < item.artists.length - 1">/</span></span
          >
        </div>
      </div>
      <div class="box"></div>
    </div>
    <mu-infinite-scroll
      :loadingText="loadingText"
      :loading="loading"
      @load="fetchData"
    />
  </div>
</template>

<script lang="ts">
import { MVInfo } from "@/model/music-info.model";
import { namespace } from "vuex-class";
import { Vue, Component } from "vue-property-decorator";
import Router from "vue-router";
import { APIType } from "@/api";
import { CommonIdType } from "@/model/id-or-enum.model";
const AppModule = namespace("app");
@Component({})
export default class NewMVComponent extends Vue {
  mvList: MVInfo[] = [];
  loading = false;
  loadingText = "努力加载中...";

  $api: APIType;
  $router: Router;

  @AppModule.Mutation("setMvId")
  setMvId: (id: CommonIdType) => void;

  mounted() {
    this.fetchData();
  }
  playMV(id: CommonIdType) {
    this.setMvId(id);
    this.$router.push({ path: `/mv/${id}` }).catch((err) => err);
  }
  fetchData() {
    const offset = this.mvList.length;
    this.loading = true;
    this.$api.getMVFirst(offset).then((res) => {
      if (res?.data?.length) {
        this.mvList = [...this.mvList, ...res.data];
      }
      this.loading = false;
    });
  }
}
</script>

<style lang="scss" scoped>
.mv-library {
  .each-mv-wrap {
    position: relative;
    margin-top: 5px;
    img {
      width: 100%;
    }
    .each-mv-count {
      position: absolute;
      top: 2px;
      right: 2px;
      color: #fff;
      z-index: 1000;
    }
    .each-mv-msg {
      position: absolute;
      bottom: 2px;
      left: 2px;
      color: #fff;
      z-index: 1000;
      .each-mv-name {
        font-size: 0.25rem;
      }
    }
    .box {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: black;
      opacity: 0.2;
      z-index: 999;
    }
  }
}
</style>
